<!-- 1 脚本 -->
<script lang='ts' setup name='index'>
import { reactive } from 'vue';
import  router  from '@/router'

//属性
const tableData = reactive(
    [
        {
            name: '管理员',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            name: '医生',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            name: '护士',
            address: 'No. 189, Grove St, Los Angeles',
        },
        {
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        },
    ]

)

/**
 * 
 * @param index 使用query方式传参
 * @param row 
 */
function handleEdit(index:number,row:any){
    //   console.log('index',index) 
    //   console.log('row',row) 

      //跳转到修改页
    //   router.push(`/system/role_edit?name=${row.name}&address=${row.address}`)
    //   router.push({
    //     path:'/system/role_edit',
    //     query:{
    //        name: row.name+"~~~~",
    //        address: row.address,
    //     }
    //   })


      router.push({
        path:'/system/role_edit',
        query:row
      })
}


function handleEditParams(index:number,row:any){


    // 普通的  params传参
    // router.push({
    //     name:'RoleEdit2',
    //     params:row
    // })


    //以属性的方式传参
    router.push({
        name:'RoleEdit3',
        params:row
    })
}



</script>


<!-- 2 模板 -->
<template>
    <div>
        <h3>角色管理</h3>


        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" stripe >
            <el-table-column type="index" width="150" label="序号" align="center" />
            <el-table-column prop="name" label="角色名称" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="address" label="编辑" >
              <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        Edit
                        </el-button>
                       
                    </template>
            </el-table-column>
        </el-table>



         <h3>角色管理</h3>

        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" stripe >
            <el-table-column type="index" width="150" label="序号" align="center" />
            <el-table-column prop="name" label="角色名称" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="address" label="编辑" >
              <template #default="scope">
                        <el-button size="small" @click="handleEditParams(scope.$index, scope.row)">
                        Edit
                        </el-button>
                       
                    </template>
            </el-table-column>
        </el-table>

    </div>


</template>


<!-- 3 样式 -->
<style scoped></style>